<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>币种资产</title>
  <link rel="stylesheet" href="../../css/reset.css" />
  <style>
    body {
      width: 100%;
      background-color: #fff;
      font-size: 0.28rem;
      height: auto;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      font-family: Helvetica;
      color: #333333;
    }

    .typeCoinImg {
      width: 6.9rem;
      height: 1.52rem;
      padding: 0 0.4rem;
      margin: auto;
      border-radius: 0.2rem;
      background: -webkit-linear-gradient(left, #ffe15b, #fccd41);
      box-sizing: border-box;
      display: flex;
      display: -webkit-flex;
      justify-content: space-between;
      -webkit-justify-content: space-between;
      align-items: center;
      -webkit-align-items: center;
      margin-top: 0.2rem;
    }

    .coinName {
      font-size: 0.32rem;
      color: rgba(24, 24, 24, 0.65);
      font-weight: 550;
    }

    #coinNum {
      flex: 1;
      font-weight: 500;
      color: #181818;
      margin-left: 0.15rem;
      padding-top: 0.05rem;
    }

    .showmoney {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      -webkit-align-items: flex-end;
    }

    .changeR {
      font-size: 0.24rem;
      font-weight: 380;
      margin-top: 0.15rem;
      color: rgba(24, 24, 24, 0.65);
    }

    .showlist {
      padding: 0 0.24rem;
      box-sizing: border-box;
      font-size: 0.26rem;
    }

    .showlist li {
      display: inline-block;
      width: 100%;
      height: 0.88rem;
      line-height: 0.88rem;
      margin-top: 0.2rem;
      border-bottom: 1px solid #e2e2e2;
    }

    #inputNum {
      display: inline-block;
      height: 90%;
      width: 100%;
      outline: none;
      border: none;
      font-size: 0.26rem;
    }

    #inputNum::-webkit-input-placeholder {
      color: #d9d9d9;
    }

    .rangeBackground {
      margin-top: 0.4rem;
      /* bottom: 0.7rem; */
      display: inline-block;
      position: relative;
      vertical-align: middle;
      width: 100%;
    }

    .rangeBackground>span {
      background: #e8e7e7;
      width: 100%;
      height: 5px;
      border-radius: 4px;
      top: 50%;
      display: block;
    }

    .rangeInput {
      width: 100%;
      -webkit-appearance: none;
      display: inline-block;
      border-radius: 10px;
      background: none;
      border: none;
      height: 5px;
      float: none;
      vertical-align: middle;
      background: -webkit-linear-gradient(#ffd203, #ffd203) no-repeat;
      background: -moz-linear-gradient(#ffd203, #ffd203) no-repeat;
      background: linear-gradient(#ffd203, #ffd203) no-repeat;
      background-size: 0% 100%;
      position: absolute;
      z-index: 1;
      margin-top: 0px;
    }

    .rangeInput::-moz-range-progress {
      background: linear-gradient(#ffd203, #ffd203) no-repeat;
      height: 5px;
    }

    .rangeInput::-webkit-slider-thumb {
      -webkit-appearance: none;
    }

    .rangeInput::-webkit-slider-runnable-track {
      height: 0;
      background: none;
      border: 0;
    }

    .rangeInput:focus {
      outline: none;
    }

    .rangeInput::-webkit-slider-thumb {
      /*圆形滑块*/
      -webkit-appearance: none;
      height: 30px;
      width: 30px;
      border: 1px solid #eee;
      margin-top: -16px;
      /*使滑块超出轨道部分的偏移量相等*/
      background: #ffffff;
      border-radius: 50%;
      /*外观设置为圆形*/
      /* border: solid 0.125em #ffd203; 设置边框 */
      box-shadow: 0 0 3px #c9c9c9;
      /*添加底部阴影*/
    }

    .rangeInput::-ms-track {
      height: 25px;
      border-radius: 10px;
      box-shadow: 0 1px 1px #def3f8, inset 0 0.125em 0.125em #0d1112;
      border-color: transparent;
      /*去除原有边框*/
      color: transparent;
      /*去除轨道内的竖线*/
    }

    .rangeInput::-ms-thumb {
      height: 19px;
      width: 19px;
      margin-top: -10px;
      /*使滑块超出轨道部分的偏移量相等*/
      background: #ffffff;
      border-radius: 50%;
      /*外观设置为圆形*/
      border: solid 0.125em #ffd203;
      /*设置边框*/
      box-shadow: 0 0em 0em #3b4547;
      /*添加底部阴影*/
    }

    .rangeInput::-ms-fill-lower {
      /*进度条已填充的部分*/
      height: 5px;
      border-radius: 4px;
      background: linear-gradient(#ffd203, #ffd203) no-repeat;
    }

    .rangeInput::-ms-fill-upper {
      /*进度条未填充的部分*/
      height: 5px;
      border-radius: 4px;
      background: #e8e7e7;
    }

    .rangeInput:focus::-ms-fill-lower {
      background: linear-gradient(#ffd203, #ffd203) no-repeat;
    }

    .rangeInput:focus::-ms-fill-upper {
      background: #e8e7e7;
    }

    .showlist li:last-of-type {
      display: inline-block;
      /* width: 100%; */
      height: auto;
      line-height: 0.88rem;
      margin-top: 0.2rem;
      border-bottom: 1px solid #e2e2e2;
      box-sizing: border-box;
    }

    .changeBhpcBum {
      margin-top: 0.3rem;
    }

    .changeBtn {
      width: 6.9rem;
      height: 0.88rem;
      margin: auto;
      /* line-height: 0.88rem;
  text-align: center; */
      display: flex;
      display: -webkit-flex;
      align-items: center;
      -webkit-align-items: center;
      justify-content: center;
      -webkit-justify-content: center;
      background-color: #ffd203;
      color: #181818;
      font-size: 0.26rem;
      margin-top: 0.7rem;
      margin-bottom: 0.6rem;
      border-radius: 0.1rem;
    }

    .tips {
      font-size: 0.24rem;
      color: #616161;
      padding: 0 0.24rem;
      line-height: 0.4rem;
    }
  </style>
</head>

<body>
  <div class="typeCoinImg">
    <span class="coinName">BHP糖果</span>
    <span class="showmoney">
      <span
        style="display:flex;display:-webkit-flex;align-items: center;-webkit-align-items: center;font-size: 0.26rem;">
        可用: <span id="coinNum" style="font-size:0.28rem;">--</span>
      </span>
      <span class="changeR">
        冻结
        <span id="coinNumToal" style="font-size:0.24rem;color:rgba(18, 18, 18,0.68)">0.00</span>
      </span>
    </span>
  </div>
  <div>
    <ul class="showlist">
      <li>
        兑换比例
        <span style="color: #ffd203;margin-left: 0.6rem;">100 : 1</span>
      </li>
      <li>
        <input type="text" id="inputNum" onkeyup="this.value=this.value.replace(/\D/g, '')" placeholder="请输入兑换数量" />
      </li>
      <li>
        <span class="rangeBackground" style="display:block;box-sizing: border-box;">
          <input class="rangeInput" type="range" id="bhpcSweet" value="0" min="0" step="1" />
          <span></span>
        </span>
        <div class="changeBhpcBum">
          兑换BHP数量:
          <span class="bhpcNumber" style="margin-left: 0.2rem;color: #ffd203;">
            0.00
          </span>
        </div>
      </li>
    </ul>
  </div>
  <div class="changeBtn">确认兑换</div>
  <div class="tips">
    兑换说明：<br />
    1.BHP糖果与BHP的兑换暂定比例为100:1 <br />
    <span style="color: #F75050;">
      2.成功兑换的BHP将自动入账到您关联的BHPay钱包中。
    </span>
  </div>
  <script src="../../script/autosize.js"></script>
  <script src="../../script/fastclick.js"></script>
  <script src="../../script/jquery_three_two_one.js"></script>
  <script src="../../script/app.js"></script>
  <script>
    apiready = function () {
      var app = new APP();
      var coinMax = 0;
      var ischeckBhpay = false;//是否Bhpay关联
      //请求数据
      function loadpage(params) {
        var account = app.getAccount();
        //获取用户资产
        if (account && account.token) {
          app.getProperties(account, function (ret, err) {
            if (ret.code == 200) {
              ischeckBhpay = ret.is_bind_bhpay;
              var thisArr = ret.data.lists.my_finance;
              for (var i = 0; i < thisArr.length; i++) {
                if (thisArr[i].coin_name == "bhpc_sweet") {
                  coinMax = Number(thisArr[i].coin);
                  $("#coinNum").text(thisArr[i].coin);
                  $("#coinNumToal").text(thisArr[i].freeze_coin);
                }
              }
              $("input[type=range]")
                .attr("max", coinMax)
                .on("input change", function (param) {
                  var changeVal = Number($(this).val());
                  $("#inputNum").val(changeVal);
                  var back = (changeVal / coinMax) * 100;
                  // app.log('max', back)
                  $(this).css("background-size", back + "% 100%");
                  $(".bhpcNumber").text(app.accDiv(changeVal, 100));
                });
              $("#inputNum").on("keyup", function (param) {
                var thisval = Number($(this).val());
                // if (checkNumber.test(thisval)) {
                if (thisval >= coinMax) {
                  thisval = coinMax;
                  $(this).val(coinMax);
                }
                $(".bhpcNumber").text(app.accDiv(thisval, 100));
                $("input[type=range]").val(thisval);
                var back = (thisval / coinMax) * 100;
                $("input[type=range]").css(
                  "background-size",
                  back + "% 100%"
                );
              });
            }
          });
        }
      }
      loadpage();
      $(".changeBtn").on("click", function (params) {
        if (ischeckBhpay == false) {
          var param = {
            dtype: "dialog46",
            data: {
              eventText: "isConnectBhpay"
            }
          };
          app.dialog(param);
          return
        }
        var account = app.getAccount();
        var checkInput = $("#inputNum").val();
        if (checkInput) {
          if (checkInput >= 100) {
            app.ajaxPro({
              url: "bhpay/sweet",
              values: {
                token: account.token,
                sweet_num: checkInput
              },
              openFlower: true
            }, function (ret) {
              if (ret.code == 200) {
                app.toast("兑换成功！");
                setTimeout(function () {
                  app.trigger("exchange_success");
                  api.closeWin();
                }, 2000)
              } else {
                app.toast(ret.message);
              }
            })
          } else {
            app.toast("至少兑换100BHP糖果");
          }
        } else {
          app.toast("不能为空");
        }
      });
      app.listen("bhpcsweetDialog", function () {
        var param = {
          dtype: "dialog36"
        };
        app.dialog(param);
      });
      app.listen("isConnectBhpay", function () {
        var account = app.getAccount();
        if (!account) return false
        app.getBhpayURL(account, function (ret) {
          if (ret.code == 200) {
            setTimeout(function () {
              app.closeDialog();
              app.openWin({
                name: "browser_headerwin",
                url: app.hd + "common/headerwin.html",
                pageParam: {
                  subpage: ret.data,
                  name: "browser",
                  type: "remote",
                  isremote: "true",
                  title: "BHPay",
                  openBHpay: 'true'
                }
              });
              // var param = {
              //   name: "BHPayBorser",
              //   url: ret.data,
              //   title: "BHPay",
              //   param: {
              //     openBHpay: 'true'
              //   }
              // }
              // app.setNavBarAttrPrimary(param);
            }, 1000)
          } else {
            app.toast(ret.message)
          }
        })
      });
      app.listen("cancelDailog", function () {
        app.closeW();
      });
      api.addEventListener({
        name: 'appintent'
      }, function (ret, err) {
        if (ret) {
          if (ret.appParam.urlScheme && ret.appParam.urlScheme == "openOutcoinPage" && ret.appParam.isAddAccountSucc == "no") {
            app.closeW("browser_headerwin")
            app.reload();
          } else {
            app.closeW("browser_headerwin")
            app.reload();
          }
        } else {
          app.closeW("browser_headerwin")
          app.reload();
        }
      });
      app.headerMap(function (ret) {
        console.log("-------------ret" + JSON.stringify(ret));
        if (ret.eventTrigger) {
          app.trigger(ret.eventTrigger);
        }
      });
    };
  </script>
</body>

</html>